﻿<template>
  <div>
    <a-drawer title="字段映射关系" placement="right" :closable="false" :visible="visible" :width="900"
      :after-visible-change="afterVisibleChange" @close="onClose">

      <div>
        <a-button class="margin" type="primary" @click="hanldleAdd">新增</a-button>
        <a-button class="margin" type="danger" @click="handleDelete(selectedRowKeys)"
          :disabled="!hasSelected()">删除</a-button>
        <a-table ref="table" :columns="columns" :rowKey="row => row.Id" :dataSource="data" :pagination="pagination"
          :loading="loading" @change="handleTableChange"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :bordered="true" size="small"
          :scroll="{  y: 800,x:500 }">

          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleEdit(record.Id)">编辑</a>
              <a-divider type="vertical" />
              <a @click="handleDelete([record.Id])">删除</a>
            </template>
          </span>
        </a-table>
      </div>
    </a-drawer>
    <a-modal :title="title" width="40%" :visible="formVisible" :confirmLoading="loading" @ok="handleSubmit"
      @cancel="() => { this.formVisible = false }">
      <a-spin :spinning="loading">
        <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
          <a-form-model-item label="目标字段" prop="TargetField">
            <a-input v-model="entity.TargetField" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item label="源字段" prop="SourceField">
            <a-input v-model="entity.SourceField" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item label="比较键" prop="IsKey">
            <a-input v-model="entity.IsKey" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item label="备注" prop="Notes">
            <a-input v-model="entity.Notes" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item label="数据类型" prop="DataType">
            <a-select show-search placeholder="请选择" option-filter-prop="children" style="width: 100%"
              :filter-option="filterOption" @change="dataType_handleChange" v-model="entity.DataType">
              <a-select-option value="String">
                String
              </a-select-option>
              <a-select-option value="Int">
                Int
              </a-select-option>
              <a-select-option value="Decimal">
                Decimal
              </a-select-option>
              <!-- <a-select-option v -->alue="Array">
              <!--   Array -->
              <!-- </a-select-option> -->
              <a-select-option value="Bool">
                Bool
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>




<script>

export default {
  components: {
    /* EditableCell, */
  },
  data() {

    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      title: '',
      data: [],
      filters: {},
      pagination: {
        current: 1,
        pageSize: 500,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      sorter: { field: 'Id', order: 'asc' },
      loading: false,
      formVisible: false,
      selectedRowKeys: [],
      entity: {},
      rules: {},
      visible: false,
      queryParam: {},
      routeQuery: {},
      columns: [
        {
          title: '目标字段',
          dataIndex: 'TargetField',
          width: 220
        },
        {
          title: '源字段',
          dataIndex: 'SourceField',
          width: 170
        },
        {
          title: '比较键',
          dataIndex: 'IsKey',
          width: 170
        },
        {
          title: '数据类型',
          dataIndex: 'DataType',
          width: 170
        },
        {
          title: '备注',
          dataIndex: 'Notes',
          width: 170
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }, width: 100, fixed: 'right'
        },
      ],

    };
  },
  methods: {
    dataType_handleChange(value) {
      this.entity.DataType = value;
    },
    //select控件查询过滤方法
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    onSelectChange(selectedRowKeys) {
      console.log(selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    },
    init() {
      this.formVisible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()
      if (id) {
        this.loading = true
        this.$http.post('/Base_Manage/Base_InterfaceOptionEntryL/GetTheData', { id: id }).then(resJson => {
          this.loading = false;
          this.entity = resJson.Data;
        })
      }
    },
    getDataList() {
      if (this.routeQuery.keyword != undefined) {
        this.queryParam.Condition = "HId";
        this.queryParam.Keyword = this.routeQuery.keyword;
        this.$http
          .post('/Base_Manage/Base_InterfaceOptionEntryL/GetDataList', {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: this.sorter.field || 'Id',
            SortType: this.sorter.order,
            Search: this.queryParam,
            ...this.filters
          })
          .then(resJson => {
            this.data = resJson.Data
          })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.entity.HId = this.routeQuery.keyword;
        /* this.loading = true */
        this.$http.post('/Base_Manage/Base_InterfaceOptionEntryL/SaveData', this.entity).then(resJson => {
          /* this.loading = false */
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    hanldleAdd() {
      this.openForm()
    },
    handleEdit(id) {
      this.openForm(id)
    },
    handleDelete(ids) {
      var thisObj = this
      this.$confirm({
        title: '确认删除吗?',
        onOk() {
          return new Promise((resolve, reject) => {
            thisObj.$http.post('/Base_Manage/Base_InterfaceOptionEntryL/DeleteData', ids).then(resJson => {
              resolve()

              if (resJson.Success) {
                thisObj.$message.success('操作成功!')

                thisObj.getDataList()
              } else {
                thisObj.$message.error(resJson.Msg)
              }
            })
          })
        }
      })
    },
    afterVisibleChange(val) {
      /* console.log('visible', val); */
    },
    showDrawer(routeQuery) {
      this.routeQuery = routeQuery;
      this.visible = true;
      this.getDataList();
    },
    onClose() {
      this.selectedRowKeys = [];
      this.visible = false;
    },
  },

};
</script>

<style>
.margin {
  margin: 3px;
}

</style>